<template>
  <view class="login">
    <Navigation
      :isCback="false"
      :isLeftText="false"
      :borderBottom="false"
    ></Navigation>
    <view class="login-btn" @click="getLogin"> 登录授权 </view>
    <!-- 授权登录 -->
    <u-popup
      mode="bottom"
      :show="getnickshow"
      @close="getnickshow = false"
      round="16rpx"
	  zIndex="9"
	  :overlayStyle="{'z-index':'8'}"
    >
      <view class="getnickbox">
        <view class="center">
         <!-- <image
            src="https://yhst.xinyuad.net/uploads/20230414/a79524fe48b0703cb8a8a9d75894aa94.png"
            class="logoimg"
            mode="aspectFit"
          ></image> -->
          <view class="name">
            让彼达
            <text>申请</text>
          </view>
        </view>
        <view class="m1 mt30">获取你的头像、昵称</view>
        <view class="m2">展示个人信息</view>
        <!-- 获取头像 -->
        <view class="xin1">
          <button
            type="default"
            class="space-between buttoncss"
            open-type="chooseAvatar"
            @chooseavatar="chooseavatar"
          >
            <view class="center toubox">
              <view class="t1">头像</view>
              <view v-if="avatar == ''" class="avatarbox">
                <u-icon name="account-fill" size="50" color="#999"></u-icon>
              </view>
              <image v-else :src="avatar" class="avatarimg"></image>
            </view>
            <u-icon name="arrow-right" size="25" color="#999"></u-icon>
          </button>
        </view>
        <!-- 获取昵称 -->
        <view class="nick">
          <view class="n1">昵称:</view>
          <input
            type="nickname"
            v-model="nickname"
            placeholder="请输入昵称"
            placeholderStyle="font-size: 30rpx;color: #999"
            @blur="onNickName"
          />
        </view>
        <!-- 获取手机号码 -->
        <!-- <view class="xin1">
          <button
            type="default"
            class="space-between buttoncss"
            open-type="getPhoneNumber"
            @getPhoneNumber="getPhoneNumber"
          >
            <view class="center toubox">
              <view class="t1">手机号</view>
              <button
                type="default"
                class="space-between buttoncss"
                open-type="getPhoneNumber"
                @getphonenumber="getphonenumber"
              >
                请授权获取手机号
              </button>
            </view>
            <u-icon name="arrow-right" size="25" color="#999"></u-icon>
          </button>
        </view> -->
        <!-- 登录 -->
        <view class="center">
          <view class="wan" @click="getUserInfo">登录</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatar: "",
      nickname: "",
      getnickshow: true,
      // 登录授权码
      sessionKey: "",
	  userInfo:{}
    };
  },
  onLoad() {
  },
  methods: {
    // 选择用户头像， 重点， 得调用下上传图片接口
    chooseavatar(e) {
      console.log(e, "chooseavatar选择头像");
      this.$uniApi.uploadFile(e.detail.avatarUrl).then((res) => {
        console.log(res, "上传图片地址",this.$utils.isBaseUrl(res));
        this.avatar = this.$utils.isBaseUrl(res);
      });
    },

    // 输入、获取昵称
    onNickName(e) {
      console.log(e, "获取的昵称");
      this.nickname = e.detail.value;
    },

    // 获取头像·昵称·手机号码后登录
    getUserInfo() {
      // this.$uniApi.on('/pages/tabBar/index')
      // return
      if (this.avatar == "") {
        uni.showToast({
          title: "请选择头像",
          icon: "none",
        });
        return;
      }
      // 坑，，，点击昵称后，开发者工具上 一直提示 昵称是空，但是 真机上 是正常的
      if (this.nickname == "") {
        uni.showToast({
          title: "请编辑用户昵称或昵称不能使用特殊字符",
          icon: "none",
        });
        return;
      }
      // 更新登录信息
      this.$api.post({
        url: "/ebapi/user_api/edit_user",
        data: {
          nickname: this.nickname,
          avatar: this.avatar,
		  // token:
          // mobile: this.mobile,
        },
        success: (res) => {
			this.$api.post({
				url: "/ebapi/user_api/get_my_user_info",
				success:(res)=>{
					if(uni.getStorageSync('spid')){
						uni.removeStorageSync('spid')
					}
					if(uni.getStorageSync('ppid')){
						uni.removeStorageSync('ppid')
					}
					// this.userInfo.nickName = this.nickname;
					// this.userInfo.avatarUrl = this.avatar;
					res.token = this.userInfo && this.userInfo.token;
					uni.setStorageSync("userInfo", res);
					this.$store.commit('setUserInfo')
					this.$uniApi.on("/pages/tabBar/home");
				},
				fail:(err)=>{
					uni.showToast({
						title:"网络状态不佳，请刷新重试！",
						icon:'none'
					})
				}
			})
        },
      });
    },
    // 获取手机号码
    getphonenumber(e) {
      console.log("phone11225");
      console.log(e, "getphone");
      // console.log(e.errMsg == "getPhoneNumber:ok", "getphone");
      // if (e.errMsg == "getPhoneNumber:ok") {
      //   this.$api.post({
      //     url: "/api/auth_login_with_wechat/getPhone",
      //     data: {
      //       iv: e.iv,
      //       encryptedData: e.encryptedData,
      //       sessionKey: this.sessionKey,
      //     },
      //     success: (res) => {
      //       console.log(res, "获取手机号码返回");
      //     },
      //   });
      // }
    },

    // 登录方法
    getLogin() {
		uni.showLoading()
      uni.login({
        provider: "weixin",
        success: (loginRes) => {
			uni.hideLoading();
          console.log(loginRes, "获取用户登录凭证code");
          // 获取用户登录凭证code
          // this.getnickshow = true;
          // return
			console.log(this.$api.post)
          this.$api.post({
            url: "/ebapi/Login/setCode",
            data: {
              code: loginRes.code,
            },
            success: (res) => {
              console.log(res, "接口返回");
              // this.sessionKey = res.session_key;
              // 获取用户信息
              uni.getUserInfo({
                provider: "weixin",
                success: (infoRes) => {
                  console.log(infoRes);
				  let reqData = {
					  // openid: res.openid,
					  iv: infoRes.iv,
					  encryptedData: infoRes.encryptedData,
					  // sessionKey: res.session_key,
					  // user_id: "",
					  cache_key:res.cache_key,
					  code:0
				  }
				  if(uni.getStorageSync('spid')){
					  reqData.spid = uni.getStorageSync('spid');
				  }
				  if(uni.getStorageSync('ppid')){
				  	reqData.ppid = uni.getStorageSync('ppid');
				  }
                  this.$api.post({
                    url: "/ebapi/Login/index",
                    data: reqData,
                    success: (info) => {
                      console.log(info, "用户信息");
					  this.userInfo = info;
					  uni.setStorageSync("userInfo", this.userInfo);
					  if(info.first==2){
						  this.$store.commit('setUserInfo')
						  this.$uniApi.on("/pages/tabBar/home");
					  }else{
						  this.getnickshow = true;
					  }
                    },
                  });
                },
				fail() {
					uni.showToast({
						title:"拒绝授权后，请在10S后重试！",
						icon:"none"
					})
					console.log('失败1')
				}
              });
            },
          });
        },
		fail() {
			console.log('失败')
		}
      });
    },
  },
};
</script>

<style lang="scss">
.login {
  .login-btn {
    color: #0d0d0d;
    font-size: 30rpx;
    font-weight: bold;
    padding: 25rpx 0;
    background-color: #fed23e;
    border-radius: 25rpx;
    margin-top: 20vh;
    text-align: center;
  }

  .getnickbox {
    padding: 40rpx 20rpx 0;

    .logoimg {
      width: 50rpx;
      height: 50rpx;
    }

    .name {
      margin-left: 20rpx;

      text {
        margin-left: 10rpx;
      }
    }

    .m1 {
      font-weight: 500;
    }

    .m2 {
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #f2f2f2;
      color: #999;
      padding-top: 10rpx;
      font-size: 24rpx;
    }

    .xin1 {
      border-bottom: 1rpx solid #f2f2f2;
      margin-bottom: 30rpx;

      .toubox {
        padding: 10rpx 0;

        .t1 {
          font-size: 28rpx;
          margin-right: 30rpx;
          color: #000001;
        }

        .avatarbox {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
        }

        .avatarimg {
          width: 100rpx;
          height: 100rpx;
          border-radius: 20rpx;
        }
      }
    }

    .buttoncss {
      background-color: #fff;
      border-radius: 0px;
      border: 0rpx solid transparent;
      color: #999;
      font-size: 30rpx;
    }

    button::after {
      border: 0px solid rgba(0, 0, 0, 0.2);
    }

    .nick {
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #f2f2f2;
      display: flex;
      align-items: center;
      padding-left: 14px;
      padding-right: 14px;

      .n1 {
        font-size: 28rpx;
        margin-right: 30rpx;
      }
    }

    .wan {
      background-color: #fed23e;
      padding: 15rpx 80rpx;
      border-radius: 40rpx;
      margin-bottom: 60rpx;
      font-size: 28rpx;
      font-weight: bold;
    }

    .mt30 {
      margin-top: 30rpx;
    }
  }
}
</style>
